import React, { Component } from 'react';
import axios from 'axios'
import Pts from 'prop-types'
class Captcha extends Component {
    // 在子组件中对父组件的传给当前组件的参数进行类型限制 使用 prop-types这个模块
    // 步骤1; 引入import Pts from 'prop-types'
    // 步骤2: 使用静态属性的形式限制
    static propTypes = {
        // key: value
        getKey: Pts.func.isRequired
    }

    //默认的属性宽和高 设置验证码大小的
    static defaultProps = {
        w: 140,
        h: 40
    }
    state = {
        imgUrl: ''  // 初始数据
    }
    render() {
        return (
            <div onClick={this.loadRefresh} >
                <img src={this.state.imgUrl} width={this.props.w + 'px'} height={this.props.h + 'px'} />
            </div>
        );
    };
    loadImg = () => {
        // 发起验证码请求
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res => {
            //console.log(res);
            // 将后台验正码返回的key 标识存在父组件得state 对象上,
            this.setState({
                imgUrl: res.data.img
            }, () => {
                // 表示此时已经赋值成功
                this.props.getKey(res.data.key)
            })


        }).catch(e => { })
    };
    // 点击刷新验证码
    loadRefresh = () => {
        this.loadImg()
    }
    componentDidMount() {
        // 初始化请求验证码
        this.loadImg()
    }
}



export default Captcha;
